<template>
  <div>
    <div id="container" ref="container">
      <button @click="handleClick">Click Me</button>
    </div>
    <div id="clip" ref="clip"></div>
    <button @click="copyContent">Copy Content</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const container = ref<HTMLDivElement | null>(null)
const clip = ref<HTMLDivElement | null>(null)

function handleClick() {
  console.log('Clicked')
}

function copyContent() {
  if (container.value && clip.value) {
    // copy container outerHTML to clip innerHTML
    clip.value.innerHTML = container.value.outerHTML

    // fix the problem,is work
    const button = clip.value.querySelector('button')
    button!.addEventListener('click', handleClick)
  }
}
</script>

<style>
#container,
#clip {
  margin-bottom: 10px;
}
button {
  margin-right: 10px;
}
</style>
